import React from 'react';
import PropTypes from 'prop-types';
import { message, Tooltip } from 'antd';

import './toolbar.less';

const userGuideText = 'group the cells selected';

message.config({
  top: 60,
  duration: 2,
  maxCount: 3,
});

class Toolbar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  componentWillMount() {
    
  }

  render() {
    const {
      editor, updateDiagramData,
    } = this.props;

    const graph = editor && editor.graph;

    return [
      <div key="toolbar" className="toolbar">
        <div
          className="toolbar-btn"
          onClick={() => {
            const diagramXml = window.localStorage.getItem('autosaveXml');

            updateDiagramData(diagramXml);
          }}
        >
          <img className="icon" src="" alt="保存" />
          <span>save</span>
        </div>
        <Tooltip placement="top" title={userGuideText}>
          <div
            className="toolbar-btn"
            onClick={() => {
              const cellsSelected = graph.getSelectionCells();

              if (!(cellsSelected && cellsSelected.length > 1)) {
                return false;
              }

              let hasGroupCell = false;
              cellsSelected.forEach((cell) => {
                if (cell.isGroupCell || cell.isGrouped) {
                  hasGroupCell = true;
                }
              });

              if (hasGroupCell) {
                message.warning('can not group twice on the same cell');

                return false;
              }

              const allCells = graph.model.cells;

              let groupCount = 1;
              allCells && Object.keys(allCells).forEach((index) => {
                if (allCells[index].isGroupCell) {
                  groupCount += 1;
                }
              });

              const groupName = `group${groupCount}`;

              const { cellsGrouped } = editor.groupCells(cellsSelected, groupName);

              const nodeCodes = [];

              cellsGrouped.forEach((item) => {
                if (item.nodeCode) {
                  nodeCodes.push(item.nodeCode);
                }
              });

              return true;
            }}
          >
            <img className="icon" alt="group" src="" />
            <span>group</span>
          </div>
        </Tooltip>

        <Tooltip placement="top" title="ungroup the cells in a group">
          <div
            className="toolbar-btn"
            onClick={() => {
              const cellsSelected = graph.getSelectionCells();

              if (!(cellsSelected && cellsSelected.length !== 0)) {
                return false;
              }

              editor.ungroupCells();

              return true;
            }}
          >
            <img className="icon" alt="ungroup" src="" />
            <span>ungroup</span>
          </div>
        </Tooltip>

        <div
          className="toolbar-btn"
          onClick={() => {
            graph.zoomOut();
          }}
        >
          <img className="icon" alt="zoom out" src="" />
          <span>zoom out</span>
        </div>
        <div
          className="toolbar-btn"
          onClick={() => {
            graph.zoomIn();
          }}
        >
          <img className="icon" alt="zoom in" src="" />
          <span>zoom in</span>
        </div>

        <div
          className="toolbar-btn"
          onClick={() => {
            graph.zoomActual();
          }}
        >
          <img className="icon" alt="zoom actual" src="" />
          <span>zoom actual</span>
        </div>
        <div
          className="toolbar-btn"
          onClick={(e) => {
            e.currentTarget.classList.toggle('active');

            this.panning = !this.panning;

            if (this.panning) {
              editor.startPanning();
            } else {
              editor.stopPanning();
            }
          }}
        >
          <img className="icon" alt="move" src="" />
          <span>move</span>
        </div>
      </div>,
    ];
  }
}

Toolbar.propTypes = {
  updateDiagramData: PropTypes.func,
};

// Specifies the default values for props:
Toolbar.defaultProps = {
  updateDiagramData: () => {},
};

export default Toolbar;
